<%@ page contentType="text/html;charset=UTF-8" language="java"  import="java.util.*" trimDirectiveWhitespaces="true" %>
<%@include file="/WEB-INF/pages/common/taglib.jsp"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>首页</title>
<link rel="stylesheet" href="${basePath}/resources/weixin/css/style.css" />
<link rel="stylesheet" href="${basePath}/resources/weixin/css/select.css" />
<link rel="stylesheet" href="${basePath}/resources/weixin/css/layer.css" />
<link rel="stylesheet" href="${basePath}/resources/weixin/Icon/iconfont.css" />
</head>

<body>
<!-- title -->
<section class="process_title"><i>产品换款</i></section>

<main class="content">
	
   	<!-- TAB -->
   	<section id="tad" class="product_tab">
    	<a class="hover" onclick="javascript:test_item(0);" href="javascript:">贵金属</a>
    	<a onclick="javascript:test_item(1);" href="javascript:">钻石产品</a>
    </section>
     
    <!-- 贵金属 -->
    <section id="test0" class="metal">
        <section class="product_tab four">
            <a class="hover" href="">黄金</a>
            <a href="">铂金</a>
            <a href="">K金</a>
            <a href="">钯金</a>
            <a href="">白银</a>
        </section>
        
        <!-- 贵金属参数 -->
        <dl class="parameter">
            <dt>请输入贵金属参数</dt>
            <dd>
                <u>克重：</u>
                <span><input placeholder="请填写" type="text"></span>
                <em>克</em>
            </dd>
            <dd>
                <u>纯度：</u>
                <span>
                <select class="default">
                    <option value="">请选择</option>
                    <option value="1">千足金</option>
                </select>
                </span>
            </dd>
            <dd>
                <u>类型：</u>
                <span>
                <select class="default">
                    <option value="">请选择</option>
                </select>
                </span>
            </dd>
        </dl>
        <section class="load parameter_buttom"><a href="${weixinPath}/exchange/actualprice">估价</a></section>
    </section>
    
    <!-- 钻石产品 -->
    <section id="test1" class="hide">
        
        <!-- 钻石产品参数 -->
        <dl class="parameter">
            <dt>请输入钻石产品参数</dt>
            <dd>
                <u>主石：</u>
                <span><input placeholder="请填写" type="text"></span>
                <em>克拉</em>
            </dd>
            <dd>
                <u>更换：</u>
                <span class="check">
                <input id="1" type="radio" />
                <label for="1" class="check_label">
                    <i class="checkbox_icon"></i>
                </label>
                <b>换主石</b>
                </span>
                
                <span class="check">
                <input id="1" type="radio" />
                <label for="1" class="check_label">
                    <i class="checkbox_icon"></i>
                </label>
                <b>不换主石</b>
                </span>
            </dd>
            <dd>
                <u>证书：</u>
                <span>
                <select class="default">
                    <option value="">请选择</option>
                    <option value="1">千足金</option>
                </select>
                </span>
            </dd>
            <dd>
                <u>形状：</u>
                <span>
                <select class="default">
                    <option value="">请选择</option>
                </select>
                </span>
            </dd>
            <dd>
                <u>颜色：</u>
                <span>
                <select class="default">
                    <option value="">请选择</option>
                </select>
                </span>
            </dd>
            <dd>
                <u>净度：</u>
                <span>
                <select class="default">
                    <option value="">请选择</option>
                </select>
                </span>
            </dd>
            <dd>
                <u>镶嵌材质：</u>
                <span>
                <select class="default">
                    <option value="">请选择</option>
                </select>
                </span>
            </dd>
            <dd>
                <u>副石：</u>
                <span><input placeholder="请填写" type="text"></span>
                <em>克拉</em>
            </dd>
            <dd>
                <u>产品总重：</u>
                <span><input placeholder="请填写" type="text"></span>
            </dd>
        </dl>
        <section class="load parameter_buttom"><a href="${weixinPath}/exchange/actualprice">估价</a></section>
    </section>
    
    <!-- 可换款 -->    
    <section class="change">
        <span class="title">
        	<em>可换款式</em>
        	<a href="">更多款式</a>
        </span>
        <ul class="change_main">
            <li>
                <section class="collection_main">
                    <span class="pic"><a href=""><img src="${basePath}/resources/weixin/Images/com/03.jpg"></a></span>
                    <section class="text">
                        <h2><a href="">范琦14K金戒指女男情侣对戒14K黄...</a></h2>
                        <span class="price">
                            <em>剩：￥150.00</em>
                            <em>补：￥150.00</em>
                        </span>
                    </section>
                </section>
            </li>
            <li>
                <section class="collection_main">
                    <span class="pic"><a href=""><img src="${basePath}/resources/weixin/Images/com/03.jpg"></a></span>
                    <section class="text">
                        <h2><a href="">范琦14K金戒指女男情侣对戒14K黄...</a></h2>
                        <span class="price">
                            <em>剩：￥150.00</em>
                            <em>补：￥150.00</em>
                        </span>
                    </section>
                </section>
            </li>
            <li>
                <section class="collection_main">
                    <span class="pic"><a href=""><img src="${basePath}/resources/weixin/Images/com/03.jpg"></a></span>
                    <section class="text">
                        <h2><a href="">范琦14K金戒指女男情侣对戒14K黄...</a></h2>
                        <span class="price">
                            <em>剩：￥150.00</em>
                            <em>补：￥150.00</em>
                        </span>
                    </section>
                </section>
            </li>
            <li>
                <section class="collection_main">
                    <span class="pic"><a href=""><img src="${basePath}/resources/weixin/Images/com/03.jpg"></a></span>
                    <section class="text">
                        <h2><a href="">范琦14K金戒指女男情侣对戒14K黄...</a></h2>
                        <span class="price">
                            <em>剩：￥150.00</em>
                            <em>补：￥150.00</em>
                        </span>
                    </section>
                </section>
            </li>
        </ul>
    </section>

    <!-- 换款案例 -->
    <section class="case">
        <section class="process_title"><i>换款案例</i></section>
        <ul>
            <li>
                <span><img src="${basePath}/resources/weixin/Images/com/03.jpg"></span>
                <em>换款前</em>
            </li>
            <li>
                <span><img src="${basePath}/resources/weixin/Images/com/03.jpg"></span>
                <em>换款后</em>
            </li>
            <li>
                <i>仅收</i>
                <i>￥1980.00</i>
            </li>
        </ul>
        <ul>
            <li>
                <span><img src="${basePath}/resources/weixin/Images/com/03.jpg"></span>
                <em>换款前</em>
            </li>
            <li>
                <span><img src="${basePath}/resources/weixin/Images/com/03.jpg"></span>
                <em>换款后</em>
            </li>
            <li>
                <i>仅收</i>
                <i>￥1980.00</i>
            </li>
        </ul>
    </section>
 
    <!-- 换款需知 -->
    <section class="need">
    	<span class="title">换款需知</span>
    	<p>赵某玩了一会儿杜某的手机，发现杜某电脑鼠标下有一张写着一串类似密码数字的小纸条，他迅速打开杜某的微信，给自己微信发了一元钱红包，纸条上的数字竟然就是微信支付的密码。赵某喜出望外，分三次将杜某微信里的三百多元以红包形式发给了</p>
    </section>

</main>

<script type="text/javascript" src="${basePath}/resources/weixin/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="${basePath}/resources/weixin/js/jquery.dropkick-min.js"></script>
<script type="text/javascript" src="${basePath}/resources/weixin/js/checkbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){  
    $('.default').dropkick();
    theme:'black'
}); 
$(".check_label").checkbox();
</script>
<script type="text/javascript" language="javascript"> 
function test_item(n){
	var menu = document.getElementById("tad");
	var menuli = menu.getElementsByTagName("a");
	for(var i = 0; i< menuli.length;i++){
		menuli[i].className= "";
		menuli[n].className="hover";
		document.getElementById("test"+ i).className = "hide";
		document.getElementById("test"+ n).className = "metal";
	}
}
</script>
</body>
</html>
